<template>
  <div v-loading="loading" class="formClass hibaoForm column3">
    <el-form ref="ruleForm" :inline="true" :model="formData" :rules="rules" size="mini">
      <div class="position-height">
        <div>
          <el-upload
            ref="upload"
            accept=".xlsx, .xls, .csv,.docx,.pdf,.png,.jpg,.jpeg"
            multiple
            :limit="5"
            drag
            action="#"
            :auto-upload="false"
            :on-exceed="onExceed"
            :on-change="onChange"
          >
            <i class="el-icon-upload" />
            <div class="el-upload__text">{{ $t('button.dropFile') }}<em>{{ $t('button.browse') }}</em></div>
            <div slot="tip" class="el-upload__tip">{{ $t('tip.fileUploadTip') }}{{ fileSizeLimit }}MB</div>
          </el-upload>
        </div>
      </div>
      <el-form-item class="bottom-btns add-absolute">
        <el-button type="red" @click.stop="save">保存</el-button>
        <el-button @click.stop="clear">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  name: 'UploadFile',
  props: {
    // 自动添加一个key为layerid的值， 该值为创建层的id
    layerid: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      fileSizeLimit: 100,
      loading: false,
      formData: {},
      rules: []
    }
  },
  methods: {
    onExceed() {
      this.$message({
        message: this.$t('tip.fileUploadLimit'),
        type: 'warning',
        duration: 1000
      })
    },
    onChange(file) {
      if (file.size / 1024 / 1024 > this.fileSizeLimit) {
        this.$refs.upload.uploadFiles.splice(this.$refs.upload.uploadFiles.indexOf(file), 1)
        this.$message({
          message: this.$t('tip.fileLargeLimit'),
          type: 'warning',
          duration: 1000
        })
      }
    },
    clear() {
      this.$refs.upload.clearFiles()
    },
    save() {
      if (!this.$refs.upload.uploadFiles.length) {
        this.$message({
          message: this.$t('tip.uploadFirst'),
          type: 'warning',
          duration: 1000
        })
        return
      }
      // this.$refs.upload.uploadFiles.forEach(function(item, index) {
      //   formData.append('files', item.raw)
      // })
      this.$parent.uploadFileCallBack(this.$refs.upload.uploadFiles) // 父页面的回调方法
    }
  }
}
</script>
<style scoped>

</style>
